/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="ai-board">
        <div class="ai-board__main" ref="ai-board__main">
            <div class="ai-board__tmp-image"></div>
            <div class="ai-board__tmp-info">
                <div class="tmp-info__title ellipsis">{{data.name}}</div>
                <div
                    class="tmp-info__description mul-ellipsis"
                    :title="data.description"
                >{{data.description}}</div>
            </div>
        </div>
        <div class="ai-board__add-btn" @click="addNew">
            <lang>从模板新增工作流</lang>
        </div>
        <!-- <sf-layer
            v-if="data.description!==''"
            default-target="ai-board__main"
            trigger="hover"
            :default-width="260"
            :default-height="176"
            class="layer-con"
            :arrow-hide="false"
            anchor="right-start"
        >
            <div class="layer-con__des">{{data.description}}</div>
        </sf-layer>-->
    </div>
</template>

<style lang="less" scoped>
@import "~src/home/mod_common/style/color.less";

@flex: flex;
@space_between: space-between;
@boardMainPadding: 8px;

.ai-board {
    border: 1px solid @borderColor;
    background-color: #fff;
    font-size: 12px;
    color: #495060;

    &:hover {
        .ai-board__add-btn {
            background: #17c1c5;
            color: #ffffff;
        }

        .ai-board__tmp-info {
            .tmp-info__description {
                color: #495060;
            }
        }

        .ai-board__main {
            .ai-board__tmp-image {
                background-image: url("../../img/tpl/tpl-hover.png");
            }
        }
    }

    .ai-board__main {
        display: flex;
        padding: @boardMainPadding;

        .ai-board__tmp-image {
            width: 48px;
            height: 80px;
            background-image: url("../../img/tpl/tpl-normal.png");
            background-size: 100% 100%;
        }
    }

    .ai-board__add-btn {
        border-top:1px solid #ddd;
        text-align: center;
        height: 24px;
        line-height: 24px;
        cursor: pointer;
        font-size: 12px;
        color: #495060;
    }
}

.ai-board__tmp-info {
    width: calc(100% - 48px);
    padding-left: @boardMainPadding;

    .tmp-info__title {
        font-size: 12px;
        color: #495060;
        font-weight: 600;
        padding-bottom: 8px;
    }

    .tmp-info__description {
        font-size: 12px;
        color: #999999;

        -webkit-line-clamp: 3;
    }
}

// .layer-con {
//     padding: 9px 5px;
//     word-wrap: break-word;
// }
// .layer-con__des {
//     width: 250px;
//     max-height: 176px;
// }
</style>

<script>
import projectForm from '../common_form/index';
import urlAdapter from 'src/home/mod_common/url_adapter';
const ADD_PIPLINE = urlAdapter('pipeline'); // post

export default {
    props: {
        data: Object
    },
    data () {
        return {};
    },
    methods: {
        createProjectWin () {
            this.projectWin = this.$modal(projectForm, {
                autoDestroy: true,
                props: {
                    labelName: _('工作流名称')
                }
            });
        },
        addNew () {
            let vm = this;
            this.createProjectWin();
            this.projectWin.open({
                title: _('新增工作流'),
                reset: false,
                submit () {
                    vm._ajaxSubmitAdd();
                }
            });
        },

        async _ajaxSubmitAdd () {
            let vm = this;
            let params = vm.projectWin.formRoot.getJsonValue();
            params.template_id = this.data.id;
            params.pipeline_type = 1;
            this.projectWin.$mask();
            let jsonData = await this.$ajax.post(ADD_PIPLINE, params);
            this.projectWin.$unmask();
            if (!jsonData.success) {
                return this.$showErr(jsonData.message || _('网络请求失败'));
            }
            this.projectWin.hide();
            this.$ok(jsonData.message || _('新增工作流成功'));
            this.$router.push({
                path: `/workflow-manage/graph-edit?pipeline_id=${jsonData.data}`
            });
        }

        // editBoard () {
        //     let vm = this;
        //     this.createProjectWin();
        //     this.projectWin.open({
        //         title: _('编辑模板'),
        //         data: {
        //             formName: _('模板名称')
        //         },
        //         reset: false,
        //         submit () {
        //             vm._ajaxSubmitEdit();
        //         }
        //     });
        // },

        // _ajaxSubmitEdit () {
        //     let vm = this;
        //     vm.projectWin.formRoot.getJsonValue();
        //     window.console.log('edit', vm.projectWin.formRoot.getJsonValue());
        //     this.projectWin.hide();
        // },

        // deleteBoard (title) {
        //     this.$confirm({
        //         title: _('提示'),
        //         subTitle: _('确定要删除{0}模板吗？', title),
        //         msg: '',
        //         icon: 'warning',
        //         autoClose: true,
        //         callback: actionName => {
        //             if (actionName === 'submit') {

        //                 // this._ajaxDeleteProjectItem(params);
        //             }
        //         }
        //     });

        //     // TODO: 未完成
        // }
    }
};
</script>
